<script setup>
import {onLoad} from '@dcloudio/uni-app';
import {ref, onMounted, onUnmounted} from 'vue';

const defaultimg = ref('https://resource.tuniaokj.com/images/xiongjie/xiong-3d-2.jpg');

const playIcon = ref('suspend');
const tabChangeIndex = ref(0)

const audioSrc = 'http://music.163.com/song/media/outer/url?id=509313150.mp3';
//数据格式一
const tabs = ['课程简介', '课程大纲', '课程评价']

onLoad((optision) => {
  console.log('optision', optision);
})

const playClick = () => {
  if (audioContext.paused) {
    playIcon.value = 'play'; // 设置播放图标为播放状态
    audioContext.src = audioSrc;
    audioContext.seek(currentTime.value); // 设置播放位置为上次暂停位置
    audioContext.play();
  } else {
    // 播放状态，点击后暂停
    playIcon.value = 'suspend'; // 设置播放图标为暂停状态
    pauseAudio();
    currentTime.value = audioContext.currentTime; // 保存当前播放位置
  }
};


const audioContext = uni.createInnerAudioContext();
audioContext.src = audioSrc;
const currentTime = ref(0); // 当前播放时间
const duration = ref(0); // 音频总时长
const sliderValue = ref(0); // 滑块当前值
const isDragging = ref(false); // 是否正在拖动滑块

const maxSliderValue = ref(100); // 滑块最大值，默认 100

const currentTimeText = ref('00:00');
const durationText = ref('00:00');


// 格式化时间显示
const formatTime = (time) => {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};


// 监听音频元数据加载完成事件
audioContext.onCanplay(() => {
  setTimeout(() => {
    duration.value = audioContext.duration;
    maxSliderValue.value = audioContext.duration;
    durationText.value = formatTime(audioContext.duration);
  }, 100);
});


// 监听音频播放进度更新事件
audioContext.onTimeUpdate(() => {
  currentTime.value = audioContext.currentTime;
  currentTimeText.value = formatTime(audioContext.currentTime);
  if (!isDragging.value) {
    sliderValue.value = audioContext.currentTime;
  }
});

// 滑块改变事件
const onSliderChange = (e) => {
  const time = e.detail.value;
  audioContext.seek(time);
  sliderValue.value = time;
  isDragging.value = false;
  audioContext.play();
};

// 滑块拖动事件
const onSliderChanging = (e) => {
  isDragging.value = true;
  const time = e.detail.value;
  currentTimeText.value = formatTime(time);
};


onMounted(() => {
  // 开始播放音频
  // audioContext.play();
});

onUnmounted(() => {
  // 页面卸载时销毁音频上下文
  audioContext.destroy();
});

// 播放音频
const playAudio = () => {
  audioContext.play();
};

// 暂停音频
const pauseAudio = () => {
  audioContext.pause();
};

const leftClick = () => {
  uni.navigateBack();
};

const change = (index) => {
  tabChangeIndex.value = index.index;
  console.log('Tab changed to:', index.index);
};

</script>

<template>
  <fui-nav-bar :custom="true" :isFixed="true" :isOccupy="true" background="#f8f8f8">
    <view class="nav-top-box">
      <fui-icon :size="48" name="arrowleft" @click="leftClick"></fui-icon>
      <view style="width: 128rpx;"></view>
      <view class="lable-box">
        <div class="top-img">
          <image class="image-top" src="/static/index/top-lable.svg"/>
        </div>
        <text>我的课程</text>
      </view>
    </view>
  </fui-nav-bar>
  <view class="top-image">
    <image :src="defaultimg"/>
  </view>
  <view class="Audio-player">
    <view class="audio-player-box">
      <view class="player-box-title">
        <view>这个是课程的名字</view>
        <text>这是课程一句话简介，只有一句话，刚好一行字</text>
      </view>
      <view class="player-box">
        <view class="player-box-slider">
          <view class="container">
            <view class="time-display">{{ currentTimeText }} / {{ durationText }}</view>
            <slider :max="100" :min="0" :value="sliderValue" activeColor="#4dc1c6" class="slider"
                    @change="onSliderChange" @changing="onSliderChanging"/>
          </view>
        </view>
        <view class="player-box-btn-box">
          <image src="/static/audio/vector.svg"/>
          <image src="/static/audio/skip-back.svg"/>
          <fui-icon :name="playIcon" :size="80" color="#12868C" @click="playClick"></fui-icon>
          <image src="/static/audio/skip-forward.svg"/>
          <image src="/static/audio/rotate.svg"/>
        </view>
      </view>
      <view class="player-box-content">
        <text>书籍名称：我们何以不同</text>
        <view class="player-box-content-content">
          <view>书籍作者：阿依努尔</view>
          <view>901人已加入学习</view>
        </view>
      </view>
    </view>
    <fui-tabs :short="false" :sliderHeight="14" :tabs="tabs" background="rgba(248, 248, 248, 0.97)" color="#999999"
              selectedColor="#424242"
              sliderBackground="linear-gradient(302.79deg, #12868C 7.39%, #5DDAE0 71.89%, #A2FAFF 98.88%)"
              @change="change"/>
    <view v-if="tabChangeIndex === 0" class="audio-play-content">
      <view style="padding: 20rpx;">
        <!-- <view>hello</view> -->
      </view>
    </view>
    <view v-if="tabChangeIndex === 1" class="audio-play-analecta">
      <view style="padding: 20rpx;">
        <view class="play-analecta">共 6 章</view>
        <view v-for="index in 10" :key="index" class="play-analecta-list">
          <view class="analecta-list-top">
            <view>001 | 这是章节标题名称</view>
            <image src="/static/audio/eye.svg"/>
          </view>
          <view class="analecta-list-bot">901 人已学习</view>
        </view>
      </view>
    </view>
    <view v-if="tabChangeIndex === 2" class="audio-play-comments">
      <view style="padding: 20rpx;">
        <view class="play-user-comments-box">
          <image :src="defaultimg" class="user-avatar"/>
          <view class="user-comments-box">
            <view class="comments-box-top">
              <view style="font-size: 28rpx;color: #999999;">用户名称</view>
              <view style="font-size: 24rpx;color: #A5A5A5;">2024-02-28 17：23</view>
            </view>
            <view class="user-comments">
              是一节好课程，看完感悟很多，已经看了三遍了，非常值得学习，是一节好课程，看完感悟很多，已经看了三遍了，非常值得学习
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.nav-top-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .lable-box {
    width: 212rpx;
    height: 84rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;

    .top-img {
      margin: 0 10rpx 0 35rpx;

      .image-top {
        width: 36rpx;
        height: 36rpx;
      }
    }

    text {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.top-image {
  width: 100%;
  height: 553.84rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.Audio-player {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;

  .audio-player-box {
    width: 100%;
    height: 512rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding: 20rpx;

    .player-box-title {
      width: 670rpx;
      height: 92rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      view {
        font-size: 36rpx;
        color: #424242;
      }

      text {
        font-size: 24rpx;
        color: #424242;
      }
    }

    .player-box {
      width: 670rpx;
      height: 184rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      .player-box-slider {
        width: 100%;
        height: 60rpx;

        .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
        }

        .slider {
          width: 100%;
          --active-color: #48d1cc;
          --track-color: #dcdcdc;
          --thumb-color: #48d1cc;
        }

        .time-display {
          width: 100%;
          font-size: 20rpx;
          color: #666;
        }
      }

      .player-box-btn-box {
        width: 100%;
        height: 116rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    .player-box-content {
      width: 670rpx;
      height: 76rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      text {
        font-size: 24rpx;
        color: #999999;
      }

      .player-box-content-content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        view {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }

  .audio-play-content {
    width: 100%;
    height: auto;
    margin: 20rpx;
    padding: 20rpx;
  }

  .audio-play-analecta {
    width: 100%;
    height: auto;
    margin: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .play-analecta {
      background: #e1eded;
      width: 105rpx;
      height: 44rpx;
      border-radius: 20rpx;
      font-size: 20rpx;
      color: #12868C;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .play-analecta-list {
      margin: 25rpx;
      width: 670rpx;
      height: 134rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border-bottom: 1rpx solid #DCDCDCCC;

      .analecta-list-top {
        width: 100%;
        height: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .analecta-list-bot {
        color: #999999;
        font-size: 24rpx;
      }
    }
  }

  .audio-play-comments {
    width: 100%;
    height: auto;
    margin: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .play-user-comments-box {
      width: 670rpx;
      height: 238rpx;
      display: flex;
      justify-content: space-between;

      .user-avatar {
        width: 72rpx;
        height: 72rpx;
        border-radius: 99999rpx;
      }

      .user-comments-box {
        width: 578rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .comments-box-top {
          width: 236rpx;
          height: 74rpx;
        }

        .user-comments {
          width: 578rpx;
          height: 144rpx;
          color: #424242;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>